<template>
  <ContentWrap title="客户年龄" class="h-1/1 !mb-0px">
    <div class="flex items-center">
      (
      <el-image class="h-26px" :src="women" />
      <span>&nbsp;女性&nbsp;123&nbsp;</span>
      <el-image class="h-26px" :src="man" />
      <span>&nbsp;男性&nbsp;45&nbsp;</span>
      <el-image class="h-26px" :src="unknown" />
      <span>&nbsp;未知&nbsp;0&nbsp;</span>
      )
    </div>
    <el-row :gutter="10" class="mt-10px">
      <el-col
        v-for="(item, index) in 8"
        :key="index"
        :xs="6"
        :sm="6"
        :md="8"
        :lg="6"
        :xl="6"
        class="mb-10px"
      >
        <div class="flex flex-col justify-center items-center">
          <el-image class="w-48px h-48px rounded" :src="people" />
          <div class="flex flex-col justify-center items-center mt-10px">
            <div>10</div>
            <div>未知年龄</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import man from '@/assets/imgs/home/man.png'
import women from '@/assets/imgs/home/women.png'
import unknown from '@/assets/imgs/home/unknown.png'
import people from '@/assets/imgs/home/people.png'
/** 会员用户统计卡片 */
defineOptions({ name: 'AgeCard' })

const loading = ref(true) // 加载中

const getMemberRegisterCountList = async () => {
  loading.value = true
  // 查询最近一月数据
  const beginTime = dayjs().subtract(30, 'd').startOf('d')
  const endTime = dayjs().endOf('d')
  const list = await MemberStatisticsApi.getMemberRegisterCountList(beginTime, endTime)

  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  getMemberRegisterCountList()
})
</script>
